<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>user</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <table id="dg"></table>
    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed:true" style="width:600px;height:400px;padding:10px">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'用户id:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'用户名称:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'用户密码:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="age" style="width:100%" data-options="label:'用户年龄:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'用户邮箱:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <label for="sex" class="textbox-label">用户性别:</label>
                <input id="sex" type="radio" name="sex" value="男">男
                <input id="sex" type="radio" name="sex" value="女">女
                <!-- 单选按钮radio -->
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="height" style="width:100%" data-options="label:'用户身高:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="weight" style="width:100%" data-options="label:'用户体重:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <label for="hobby" class="textbox-label">兴趣爱好:</label>
                <input id="hobby" type="checkbox" name="hobby[]" value="学习">学习
                <input id="hobby" type="checkbox" name="hobby[]" value="运动">运动
                <input id="hobby" type="checkbox" name="hobby[]" value="美食">美食
                <input id="hobby" type="checkbox" name="hobby[]" value="其他">其他
                <!-- 复选框 checkbox -->
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="address" style="width:100%;height:60px" data-options="label:'用户地址:',multiline:true,required:true">
                <!-- 文本框textarea -->
            </div>
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="language" label="Language" style="width:100%"><option value="Arabic">Arabic</option><option value="Bulgarian">Bulgarian</option><option value="Catalan">Catalan</option><option value="Chinese Traditional">Chinese Traditional</option><option value="Czech">Czech</option><option value="Danish">Danish</option><option value="Dutch">Dutch</option><option value="English" selected="selected">English</option><option value="Estonian">Estonian</option><option value="Finnish">Finnish</option><option value="French">French</option><option value="German">German</option><option value="Greek">Greek</option><option value="Haitian Creole">Haitian Creole</option><option value="Hebrew">Hebrew</option><option value="Hindi">Hindi</option><option value="Hmong Daw">Hmong Daw</option><option value="Hungarian">Hungarian</option><option value="Indonesian">Indonesian</option><option value="Italian">Italian</option><option value="Japanese">Japanese</option><option value="Korean">Korean</option><option value="Latvian">Latvian</option><option value="Lithuanian">Lithuanian</option><option value="Norwegian">Norwegian</option><option value="Persian">Persian</option><option value="Polish">Polish</option><option value="Portuguese">Portuguese</option><option value="Romanian">Romanian</option><option value="Russian">Russian</option><option value="Slovak">Slovak</option><option value="Slovenian">Slovenian</option><option value="Spanish">Spanish</option><option value="Swedish">Swedish</option><option value="Thai">Thai</option><option value="Turkish">Turkish</option><option value="Ukrainian">Ukrainian</option><option value="Vietnamese">Vietnamese</option></select>
                <!-- 下拉选中框select -->
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>


</body>

</html>

<script>
    $('#dg').datagrid({
        url: 'http://localhost:3000/users/list',
        fit: true,
        pagination: true,
        toolbar: [{
            text: '添加数据',
            iconCls: 'icon-add',
            handler: function() {
                $('#dlg').dialog('open');
            }
        }, '-', {
            text: '删除数据',
            iconCls: 'icon-cut',
            handler: function() {
                deleteDatas();
            }
        }],
        columns: [
            [{
                field: 'ck',
                checkbox: true
            }, {
                field: 'name',
                title: '姓名',
                width: 100
            }, {
                field: 'password',
                title: '密码',
                width: 100
            }, {
                field: 'age',
                title: '年龄',
                width: 50
            }, {
                field: 'email',
                title: '邮箱',
                width: 160
            }, {
                field: 'sex',
                title: '性别',
                width: 40
            }, {
                field: 'height',
                title: '身高',
                width: 40
            }, {
                field: 'weight',
                title: '体重',
                width: 40
            }, {
                field: 'hobby',
                title: '兴趣爱好',
                width: 200
            }, {
                field: 'address',
                title: '住址',
                width: 200
            }, {
                field: 'language',
                title: '国籍',
                width: 180
            }, {
                field: '_id',
                title: '操作',
                width: 80,
                formatter: function(value, row, index) {
                    //console.log(row); //输出数据行
                    return `<a href="#" onclick="editData('${
              row._id
            }')">修改</a> <a href="#" onclick="deleteData('${
              row._id
            }')">删除</a>`;
                }
            }]
        ],
        /* onClickRow: function(index, row) {
            console.log(index, row);//输出数据
        } */
        onDblClickRow: function(index, row) {
            console.log(index, row); //输出数据，双击才有效果
        }
    });


    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                //console.log($('#ff').serialize());
                var formData = $('#ff').serializeJSON();
                console.log(formData);
                if ($('#ff').serializeJSON()._id) {
                    if ($(this).form('enableValidation').form('validate')) {
                        $.ajax({
                            url: `http://localhost:3000/users/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).done(res => {
                            console.log(res); //添加成功
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear'); //清空
                        })
                    }
                } else {
                    //新增的时候不得有_id
                    delete formData._id;
                    if ($(this).form('enableValidation').form('validate')) {
                        $.ajax({
                            url: 'http://localhost:3000/users',
                            type: 'post',
                            data: formData
                        }).done(res => {
                            console.log(res); //添加成功
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        })
                    }
                };
                return false;
                // if ($(this).form('enableValidation').form('validate')) {
                //     //可以进行ajax
                // };
            }

        });
    }

    function clearForm() {
        $('#ff').form('clear');
        $('#dlg').dialog('close');
    };


    function deleteData(id) {
        $.messager.confirm('确认框', '你确认要删除这条数据吗?', function(r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/users/${id}`,
                    type: 'delete'
                }).done(res => {
                    // console.log(res); //输出删除的内容
                    $('#dg').datagrid('reload');
                });
            }
        });

    };

    function editData(id) {

        $.ajax({
            url: `http://localhost:3000/users/${id}`,
            type: 'get'
        }).done(res => {
            //console.log(res);
            $('#ff').form('load', res); //读取记录填充到表单中
            $('#dlg').dialog('open');
        })

    };

    function deleteDatas() {
        var dgSelections = $('#dg').datagrid('getSelections');
        if (dgSelections[0]) {
            $.messager.confirm('确认框', '你确认要删除数据吗?', function(r) {
                if (r) {
                    for (var i = 0; i < dgSelections.length; i++) {
                        $.ajax({
                            url: `http://localhost:3000/users/${dgSelections[i]._id}`,
                            type: 'delete'
                        }).done(res => {
                            $('#dg').datagrid('reload');
                        })
                    }
                }
            });
        } else {
            $.messager.confirm('确认框', '请选中数据');
        }

    };
</script>